<template>
	<view class="transaction" v-if="showPage">
		<u-notice-bar v-if="noticeList.length > 0" mode="horizontal" :list="newsList" class="" type="primary " bg-color="#FFFFFF" @click="toFirstNoticeDetail"></u-notice-bar>
		<!-- 三个按钮 -->
		<u-grid :col="2" :border="false">
			<u-grid-item bg-color="#f3f3f3"><u-button type="primary" :ripple="true" class="customStyleButton" @click="sentTrade">出售</u-button></u-grid-item>
			<u-grid-item bg-color="#f3f3f3"><u-button type="primary" :ripple="true" class="customStyleButton" @click="myTrade">我的交易</u-button></u-grid-item>
	<!-- 		<u-grid-item bg-color="#f3f3f3"><u-button type="primary" :ripple="true" class="customStyleButton" @click="tradeList">交易记录</u-button></u-grid-item> -->
		</u-grid>

		<!-- 求购量 -->
		<view class="countBox">
			<view class="showCount">{{ wantNum }}</view>
			<view class="showDesc">求购量</view>
		</view>

		<!-- 图表头 -->
		<view class="chartBox">
			<view class="chartTitBox flexBox">
				<view class="chartTit flexItem">价格走势</view>
				<view class="flexItem tr" v-if="!!now">
					<view class="curPrice" >￥{{now}}</view>
					<view class="priceDesc">当前价格</view>
				</view>
			</view>
		</view>
		<!-- 图表 -->
		<view class="container bgF pb30">
			<!-- 折线Line纯数字-->
			<view class="container " style="height: 350rpx;">
				<view id="container" style="width: 100%;height: 100%;"></view>
				</view>
		</view>
		<!-- 搜索 -->
		<view class="searchBox clearfix mt10">
			<u-search shape="square" placeholder="请输入搜索信息(手机号)" v-model="keyword" @change="searchChange" @search="searchSearch" @custom="searchSearch"></u-search>
		</view>

		<!-- 内容 -->
		<view v-for="(item, index) in orderList" v-bind:key="index">
			<view class="container" style="height: 1px;"></view>
			<view class="container bgF pl30 pr30 flex-spc-x pt20 pb20">
				<view class="w10" style="height:100%"><image src="../../static/logo.png" mode="widthFix" class="w100 "></image></view>
				<view class="w90 ml10">
					<view class="w100 flexBox">
						<view class="flexItem w50">
							<view class="phone fs30 mb20">
								{{ item.phone }}
								<!-- <u-tag class="ml10" text="已认证" type="primary" mode="plain" size="mini" /> -->
							</view>
							<view class="fs28 co666">总数量：{{ item.count }}</view>
							<view class="fs28 co666">
								单价：{{ item.money }}
							<text v-if="item.type == 1">幸运币</text>
							<text v-if="item.type == 2">矿币</text>
							</view>
						</view>
						<view class="flexItem w50 tar">
							<view class="fs30w">
								需支付：{{ item.total }}
								<text v-if="item.type == 1">矿币</text>
								<text v-if="item.type == 2">幸运币</text>
							</view>
							<view class="mt30"><u-button type="primary" size="mini" :ripple="true" class="customSaleButton" @click="byMachine(index)">购买</u-button></view>
						</view>
					</view>
				</view>
			</view>
		</view>
		<view class="container  mt20 mb20" style="background: #f3f3f3;"><u-divider color="#CCC" bg-color="#f3f3f3">~到底了,宝贝~</u-divider></view>
		<u-modal v-model="show" width="70%" title="确认支付" show-cancel-button @confirm="inputConfirm" @cancel="inputCancel">
			<view class="slot-content mt30 mb30"><input class="uni-input tac" type="number" password v-model="password" focus placeholder="请输入密码" @blur="inputBlur" /></view>
		</u-modal>
	</view>
</template>

<script>
import uCharts from '../../plugins/stan-ucharts/u-charts/u-charts.js'; //可以优化放全局 uCharts ==>使用全局
import echart from '../../utils/echarts.min.js'; //可以优化放全局 uCharts ==>使用全局
const lineCharts = {},
	optionAs = {};
export default {
	data() {
		return {
			now:'',//当前价格
			wantNum: 0, //求购量
			showPage: false, //没有登录不显示内容
			lineData2: {
				//数字的图--折线图数据
				// categories: ['2012', '2013', '2014', '2015', '2016'],
				// series: [{ name: '成交量A', data: [50, 100, 200, 300, 400] }]
				categories: [],
				series: [{ name: '成交量A', data: [] }]
			},
			keyword: "", //搜索

			newsList: [], //公告内容
			noticeList: [], //获取通知公告列表
			orderList: [], //订单列表
			index: null, //当前点击立即购买时候的购买商品下标
			pageSize: 10, //每页数量
			pageNum: 1, //页码
			show: false, //模态框
			password: '', //模态框密码
			canvasId: 'canvasId',
			cWidth: 100,
			cHeight: 100,
			labelKey: 'categories',
			valueKey: 'series'
		};
	},
	watch: {
		// lineData2: {
		// 	//深度监听，可监听到对象、数组的变化
		// 	handler(newValue, oldValue) {
		// 		this.$refs.mainindex.resize();
		// 	},
		// 	deep: true
		// }
	},
	components: {},
	methods: {
		// 购买矿机
		byMachine(index) {
			this.show = true;
			this.index = index;
		},
		// 模态框事件
		inputBlur(e) {
			// console.log('inputBlur', e);
			this.password = e.detail.value;
		},
		inputConfirm(e) {
			// console.log('inputConfirm', this.password);
			// 没有密码
			if (!!!this.password) {
				uni.showToast({
					title: '请输入密码！',
					mask: true,
					icon: 'none',
					duration: 500
				});
				return;
			}

			if (!!this.password) {
				this.passwordCheck(this.password)
					.then(() => {
						// 密码校验成功
						// POST/mobileUser/purchase/buy购买
						let postObj = {
							url: '/mobileUser/purchase/buy',
							data: {
								userId: uni.getStorageSync('y-userId'),
								token: uni.getStorageSync('y-token'),
								orderId: this.orderList[this.index].orderId
							}
						};
						this.postRequest(postObj)
							.then(res => {
								if (res.data.code == 200) {
									uni.showToast({
										title: res.data.msg,
										mask: true,
										icon: 'none',
										duration: 500,
										success:()=>{
											setTimeout(()=>{
												this.pageSize = 10; //每页数量
												this.pageNum = 1; //页码
												this.orderList=[]
												this.getOrderList(); //查询订单列表
											},500)
										}
									});
									
								} else {
									uni.showToast({
										title: res.data.msg,
										mask: true,
										icon: 'none',
										duration: 500
									});
								}
							})
							.catch(err => {});
					})
					.catch(() => {
						//密码校验失败
					});
			}

			this.password = '';
		},
		inputCancel() {
			this.password = '';
		},

		// 查询动态列表
		// GET/mobileUser/order/list查询订单列表
		getOrderList() {
			var postObj = { url: '/mobileUser/order/list', data: { phone:this.keyword, pageNum: this.pageNum, pageSize: this.pageSize } };
			this.getRequest(postObj)
				.then(res => {
					// console.log('res查询订单列表', res);
					if (res.data.code == 200) {
						if (res.data.rows.length > 0) {
							res.data.rows.forEach((items, i) => {
								// console.log(items.phone);
								items.phone = items.phone.substring(0, 3) + '*****' + items.phone.substring(8, 11);
							});
						}
						this.orderList = [...this.orderList, ...res.data.rows];
					}
				})
				.catch(err => {
					// console.log('err查询订单列表', err);
				});
		},
		// 去第一个详情
		toFirstNoticeDetail() {
			uni.navigateTo({
				url: `/pages/more/noticeDeatil?index=${0}`
			});
		},
		// GET/mobileUser/order/getCount查询求购量
		getCount() {
			var postObj = { url: '/mobileUser/order/getCount', data: {} };
			this.getRequest(postObj)
				.then(res => {
					// console.log('res查询求购量', res);
					if (res.data.code == 200) {
						this.wantNum = res.data.data;
					}
				})
				.catch(err => {
					// console.log('err查询求购量', err);
				});
		},
		// GET/mobileUser/order/getPriceTrend价格走势
		getPriceTrend() {
			var postObj = { url: '/mobileUser/order/getPriceTrend', data: {} };
			this.getRequest(postObj)
				.then(res => {
					// console.log('res价格走势', res);
					if (res.data.code == 200) {
						let data = res.data.data;

						var arr = [];
						if (data.avgList.length > 0) {
							data.avgList.forEach((items, i) => {
								items = parseInt(Number(items));
							});
						}

						if (data.orderTotalList.length > 0) {
							data.orderTotalList.forEach((items, i) => {
								items = parseInt(Number(items));
								arr.push(items);
							});
							this.now = data.orderTotalList[data.orderTotalList.length-1]
						}
						this.lineData2.categories = data.timeList;
						// this.lineData2.series.data = data.avgList;
						this.lineData2.series.data = arr;
						// console.log('lineData2', this.lineData2);
						// this.$refs.mainindex.resize();

						// echart
						// 基于准备好的dom，初始化echarts实例
						// console.log(echart);
						var myChart = echart.init(document.getElementById('container'));
						// 绘制图表
						myChart.setOption({
							title: {
								// show:true,
								// text: '主标题'
							},
							tooltip: {
								show: true,
								trigger: 'axis',
								confine:true,    //在移动端，提示框中的内容如果长了就会移动到窗口外，所以该参数是限制提示框始终在窗口内
								alwaysShowContent:false,
								axisPointer: {
									type: 'cross',
									crossStyle: {
										color: '#999'
									}
								},
								triggerOn: 'click' //触发方式
							},
							//设置canvas内部表格的内距
							grid: {
								left: '3%',
								right: '4%',
								bottom: '3%',
								containLabel: true
							},
							xAxis: {
								type: 'category',
								data: this.lineData2.categories,
								axisPointer: {
									type: 'line'
								},
								axisLabel: {
									formatter: '{value} '
								}
							},
							yAxis: {
								type: 'value',
								axisPointer: {
									type: 'line'
								},
								axisLabel: {
									formatter: '{value} '
								}
							},
							series: [
								{
									data: this.lineData2.series.data,
									type: 'line',
									areaStyle: {
										normal: {
											color: '#C1FFC1' //改变区域颜色
										}
									},
									itemStyle: {
										normal: {
											color: '#008B45', //改变折线点的颜色
											lineStyle: {
												color: '#7CCD7C' //改变折线颜色
											},
											label: {
												show: true
											}
										}
									}
								}
							]
						});
					}
				})
				.catch(err => {
					// console.log('err价格走势', err);
				});
		},
		// GET/mobileUser/notice/list获取通知公告列表
		getNoticeList() {
			var postObj = { url: '/mobileUser/notice/list', data: {} };
			this.getRequest(postObj)
				.then(res => {
					// console.log('res获取通知公告列表', res);
					if (res.data.code == 200) {
						this.noticeList = res.data.rows;
						if (res.data.rows.length > 0) this.newsList[0] = res.data.rows[0].noticeTitle;
					}
				})
				.catch(err => {
					// console.log('err获取通知公告列表', err);
				});
		},
		// 搜索
		searchChange(e) {
			// console.log(e);
			this.keyword = e;
		},

		searchSearch(e) {
			// console.log(e);
			this.orderList=[]
			this.pageSize=10, //每页数量
			this.pageNum= 1, //页码
			this.getOrderList()
		},
		//  @click="sentTrade">求购
		sentTrade() {
			uni.navigateTo({
				url: '/pages/transaction/sentTrade'
			});
		},
		// @click="myTrade">我的交易
		myTrade() {
			uni.navigateTo({
				url: '/pages/transaction/myTrade'
			});
		},
		//  @click="tradeList">交易记录
		tradeList() {
			uni.navigateTo({
				url: '/pages/transaction/tradeList'
			});
		}
	},
	// 触底事件
	onReachBottom() {
		this.pageNum += 1;
		// console.log(1111)
		// this.orderList=[]
		this.getOrderList();
	},
	created() {},
	onShow() {
		if (this.showPage) {
			this.getNoticeList(); //获取通知公告列表
			this.getCount(); //查询求购量
			this.getPriceTrend(); //价格走势
			this.pageSize = 10; //每页数量
			this.pageNum = 1; //页码
			this.orderList=[]
			this.getOrderList(); //查询订单列表
		}
	},
	onLoad(options) {
		if (this.judgeLoading(options)) {
			this.showPage = true;
		}
	}
};
</script>

<style lang="scss" scoped>
.customStyleButton {
	width: 85%;
	border-radius: 0rpx;
	background: #0af;
}
.customSaleButton {
	width: 150rpx;
	border-radius: 0rpx;
	background: #0af;
}
.countBox {
	background: #fff;
	padding: 22rpx 0;
	text-align: center;
	color: #181818;
	font-size: 35rpx;
	margin-bottom: 10rpx;
	.showCount {
		margin-bottom: 10rpx;
		font-size: 35rpx;
	}
	.showDesc {
		color: #666;
		font-size: 24rpx;
	}
}

.chartBox {
	height: 88rpx;
	background: #fff;
	margin-bottom: 0;
	.chartTit {
		line-height: 88rpx;
		font-size: 28rpx;
		color: #181818;
	}
	.chartTitBox {
		height: 44rpx;
		padding: 0 11rpx;
	}
	.curPrice {
		font-size: 28rpx;
		color: #181818;
		height: 26rpx;
		line-height: 26rpx;
		margin: 22rpx 0 10rpx;
	}
	.priceDesc {
		font-size: 24rpx;
		color: #666;
		height: 24rpx;
		line-height: 24rpx;
	}
}
.searchBox {
	padding: 10px 22px;
	background: #fff;
}
</style>
